<template>
  <div class="app-main">
    <div class="section-main">
        <div class="upload-div clearfix">
          <div class="upload-input">
            <btn-upload @getuploadimg="setuploadimg"
              color='#bf464a'
              size='15'
            ></btn-upload>
          </div>
           <div class="img-upload">
                <img :src="cutimg" v-if="hasimg" class="cutimg">
          </div>
        </div>
        <div class="text-div">
            <p class="content">
                <textarea name="" id="" rows="6" v-model="content"></textarea>
                <span class="max-content">{{contentlength}}/{{maxlength}}</span>
            </p>
            <p  class="word">
              <span @click="getLuckWord">随机祝福语</span>
            </p>
            </div>
    </div>
      <div class="section-bottom">
          <img src="../../../assets/img/guoqin/bottom.png" alt="" class="img-fenche">
          <div class="show-div" @click="goshow">
            <btn-router
              :background='require("../../../assets/img/guoqin/btn1.png")'
              :width=261
              :height=42
              size='14'
            >预览贺卡</btn-router>
          </div>
          <div class="back-div" @click="goback" >
            <btn-router
              :background='require("../../../assets/img/guoqin/btn1.png")'
              :width=261
              :height=42
              size='14'
            >重新选择</btn-router>
          </div>
    </div>
    <div class="popup" v-show="panel">
      <my-cropper :imgurl="imgurl" @getcutimg="setcutimg"></my-cropper>
    </div>
  </div>
</template>

<script>
import btnUpload from '@/components/upload'// 上传图片btn
import btnRouter from '@/components/routerButton'// 跳转按钮组件
import myCropper from '@/components/cropper'// 裁剪组件
import luckWord from '../../../assets/utils/luck.js'// 祝福语
export default {
  name: 'HelloWorld',
  data () {
    return {
      // 裁剪弹出层相关数据
      panel: false,
      imgurl: '',

      // 输入相关数据
      hasimg: false,
      cutimg: '',
      content: '',
      contentlength: 0,
      maxlength: 70,
      cid: ''
    }
  },
  watch: {
    content (newVal, oldVal) {
      this.contentlength = newVal.length
      if (this.contentlength > this.maxlength) {
        this.content = oldVal
      }
    }
  },
  components: {
    btnUpload,
    btnRouter,
    myCropper
  },
  methods: {
    inputblur () {
      document.querySelector('.section-bottom').style.position = 'fixed'
    },
    inputfocus () {
      document.querySelector('.section-bottom').style.position = 'relative'
    },
    setCss () {
      var originalHeight = document.documentElement.clientHeight || document.body.clientHeight
      document.querySelector('.container').style.height = originalHeight.toString() + 'px'
      window.onresize = function () {
        var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
        if (resizeHeight * 1 < originalHeight * 1) {
          document.querySelector('.section-bottom').style.position = 'relative'
        } else {
          document.querySelector('.section-bottom').style.position = 'fixed'
          document.querySelector('.section-my').style.display = 'block'
          document.querySelector('.section-do').style.display = 'block'
        }
      }
    },
    goback () {
      this.$router.go(-1)
    },
    goshow () {
      this.$store.dispatch('savePreview', { imgurl: this.cutimg, content: this.content, contentId: 1 })
      this.$router.push('/show/guoqin')
    },
    getLuckWord (e, type = 'jiandang') {
      var index = Math.ceil(Math.random() * 100)
      var maxLength = luckWord[type].length
      index = index % maxLength
      this.content = luckWord[type][index]['luck']
    },
    setuploadimg (imgInfo) {
      this.panel = imgInfo.panel
      this.imgurl = imgInfo.imgurl
    },
    setcutimg (cutimgInfo) {
      this.panel = false
      this.cutimg = cutimgInfo.cutimg
      this.hasimg = cutimgInfo.hasimg
    }
  },
  mounted () {
    this.getLuckWord()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .app-main{background:url(../../../assets/img/guoqin/background.png) no-repeat top left;background-size:cover}
  .app-main::before{content: '';width: 5.76rem;height: 2.7rem;background:url(../../../assets/img/guoqin/background1.png) no-repeat top left;background-size:contain;position: absolute}
  .section-main{position:relative;top:2rem;width:6.7rem;margin:0 auto;padding:0.5rem .8rem;min-height:9rem;background-color:rgba(255,248,242,0.3);box-sizing:border-box;border-radius:20px;box-shadow:5px -5px 20px #ebddd1;}
  .section-main::before{content:"";position: absolute;top:0.2rem;right:0;width:2.5rem;height:1.91rem;background:url(../../../assets/img/guoqin/bird.png) no-repeat top left;background-size:contain;}
  .section-main div{position: relative;z-index: 2;}
  .img-upload{margin-bottom:0.3rem ;left: 0.5rem;float:left;width:2rem;height:2rem;position:relative;border-radius:10px;box-shadow:5px -5px 20px #ebddd1;color:#bb010e;text-align:justify}
  .upload-div{margin-top: 1rem;}
  .upload-input{float:left;position:relative;top:0.8rem;margin-left:0.5rem;}
  .section-bottom{position:absolute;bottom:0;width:100%}
  .section-bottom img{position:absolute;bottom:0;width:100%}
  .show-div{display:inline-block;position:relative;bottom:.2rem;left:1rem}
  .back-div{display:block;position:relative;bottom:.2rem;right:1rem;float:right}
  .popup {
    z-index: 99;
    position: fixed;
    padding-top: 60px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background:rgba(0,0,0,1);
}

.cutimg{width: 90%;margin: 5%}
.text-div .content{position: relative;}
.text-div textarea{width: 100%;border: none;font-size:14px}
.max-content{
  display: block;
  position: absolute;
  right:0;
  bottom:0;
  font-size:12px
}
.word{
    z-index:20;
    position: relative;
    margin-top: 20px;
  }
  .word span{
    background: #e8b217;
    padding:3px 5px;
    color: #fff;
    font-size: 12px;
  }

</style>
